<template>
	<div class="component-nav">
		<ul>
			<li :class="{ action: urlEquity(item.path) }" v-for="item in menuList" @click="toPage(item.path)">
				<span>{{ item.name }}</span>
			</li>
		</ul>
	</div>
</template>

<script>
'use strict';
import { routerArr } from '@admin/router/index';
export default {
	data() {
		return {
			menuList: []
		};
	},
	computed: {
		urlEquity: function() {
			let p1 = this.$route.path;
			return function(p2) {
				return p1 == p2;
			};
		}
	},
	components: {},
	watch: {
		$route: (to, from) => {
			// console.log(to, from);
		}
	},
	created() {},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			let menuList = [];
			routerArr.forEach((x, indexX) => {
				x.children.forEach((y, indexY) => {
					menuList.push(y);
				});
			});
			this.menuList = menuList;
		},
		toPage(page) {
			this.$router.push(page);
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@admin/assets/css/common';
.component-nav {
	width: 100%;
	height: 100%;
	ul {
		li {
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}
		.action {
			background: rgba(0, 0, 0, 0.1);
			span {
				color: $tc;
			}
		}
	}
}
</style>
